<template>
  <div>
    <a-comment>
      <div slot="content">
        <a-form-item>
          <a-textarea :rows="5" @change="handleChange" :value="value" id="publish"></a-textarea>
        </a-form-item>
        <a-form-item class="submit-btn-div">
          <a-button
            htmlType="submit"
            :loading="submitting"
            @click="handleSubmit('publish')"
            type="primary"
            class="green-btn"
          >发表评论</a-button>
        </a-form-item>
      </div>
    </a-comment>
    <a-list
      v-if="comments.length"
      :dataSource="comments"
      :header="`${comments.length} 条评论`"
      itemLayout="horizontal"
    >
      <a-list-item slot="renderItem" slot-scope="item">
        <a-comment class="author">
          <span slot="author">{{ item.authorName }}</span>
          <a-tooltip slot="datetime">
            <span>发表于 {{item.createTime }}</span>
          </a-tooltip>
          <div slot="content">{{ item.content }}</div>
          <template slot="actions" class="actions">
            <span
              v-show="i.isShow"
              class="actions-mr"
              :style="{color: i.color}"
              v-for="(i, index) in item.actions"
              :key="index"
              @click="doOperation(1, i.text, item.id, item.authorName, $event, `secondComment${item.id}`)"
            >{{ i.text }}</span>
          </template>
          <!-- 二级评论区 -->
          <div class="commentsList2" :id="`secondComment${item.id}`">
            <a-list
              class="infinite-list"
              v-if="item.secondCommentData.length"
              :dataSource="item.secondCommentData"
              header=" "
              itemLayout="horizontal"
            >
              <a-list-item slot="renderItem" slot-scope="k">
                <a-comment>
                  <span slot="author">{{ k.authorName }}</span>
                  <a-tooltip slot="datetime">
                    <span>回复于 {{k.createTime }}</span>
                  </a-tooltip>
                  <div slot="content">{{ k.content }}</div>
                </a-comment>
                <template slot="actions">
                  <span
                    v-show="j.isShow"
                    class="actions-mr"
                    :style="{color: j.color}"
                    v-for="(j, index) in k.actions2"
                    :key="index"
                    @click="doOperation(2, j.text, k.id, k.authorName)"
                  >{{ j.text }}</span>
                </template>
              </a-list-item>
            </a-list>
            <el-pagination
              v-if="item.secondCommentData.length"
              background
              @size-change="handleSizeChange2"
              @current-change="handleChangePage2"
              :current-page="pn2"
              :page-sizes="[5, 10, 15, 20, 30, 40]"
              :page-size="ps2"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total2"
            ></el-pagination>
          </div>
        </a-comment>
      </a-list-item>
    </a-list>

    <el-pagination
      v-if="comments.length"
      class="ct mr-bt"
      background
      @size-change="handleSizeChange"
      @current-change="handleChangePage"
      :current-page="pn"
      :page-sizes="[5, 10, 15, 20, 30, 40]"
      :page-size="ps"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <div v-if="replyDiv" class="reply-div">
      <el-input type="textarea" v-model="replyValue" :rows="3" :placeholder="placeholder"></el-input>
      <div class="reply-btn">
        <el-button
          class="green-btn2"
          type="primary"
          @click="handleSubmit('reply')"
          :loading="submitting2"
        >回复</el-button>
        <el-button class="green-btn2" type="primary" @click="cancelReply()">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mixin } from "../../../../../src/mixin/mixin";
import {
  getFirstCommentList,
  getSecondCommentList,
  addComment,
  deleteComment,
} from "../../../../service/Api";
export default {
  name: "commentReply",
  mixins: [mixin],
  props: ["articleId"],
  data() {
    return {
      pn: 1,
      ps: 5,
      total: 0,
      pn2: 1,
      ps2: 5,
      total2: 0,
      replyValue: "",
      replyDiv: false,
      placeholder: "",
      commentId: 0,
      submitting2: false,
      firstCommentId: 0,
      secondCommentId: 0,
      comments: [],
    };
  },
  watch: {
    articleId(n, o) {
      this.articleId = n;
      this.getFirstCommentList();
    },
  },
  methods: {
    getFirstCommentList() {
      getFirstCommentList({
        pn: this.pn,
        ps: this.ps,
        articleId: this.articleId,
      }).then((res) => {
        let recordsData = res.data.records;
        this.total = res.data.total;

        if (recordsData.length > 0) {
          this.comments = recordsData.map((item) => {
            return {
              ...item,
              actions: [
                {
                  text: "回复",
                  isShow: true,
                },
                {
                  text: "展开",
                  isShow: item.replyCount != null ? true : false,
                },
                {
                  text: "删除",
                  color: "#F56C6C",
                  isShow: item.canDelete,
                },
              ],
              secondCommentData: [],
            };
          });
        } else {
          this.comments = [];
        }
      });
    },
    getSecondCommentList() {
      getSecondCommentList({
        pn: this.pn2,
        ps: this.ps2,
        commentId: this.firstCommentId,
      }).then((res) => {
        let records = res.data.records;
        this.total2 = res.data.total;

        this.comments.forEach((item) => {
          item.secondCommentData = [];
          records.forEach((i) => {
            if (i.commIdOne == item.id) {
              item.secondCommentData.push({
                ...i,
                actions2: [
                  {
                    text: "回复",
                    isShow: true,
                  },
                  {
                    text: "删除",
                    color: "#F56C6C",
                    isShow: i.canDelete,
                  },
                ],
              });
            }
          });
        });
        console.log("2", this.comments);
      });
    },
    handleChangePage(val) {
      this.pn = val;
      this.getFirstCommentList();
    },
    handleSizeChange(val) {
      this.ps = val;
      this.getFirstCommentList();
    },
    handleChangePage2(val) {
      this.pn2 = val;
      this.getSecondCommentList();
    },
    handleSizeChange2(val) {
      this.ps2 = val;
      this.getSecondCommentList();
    },
    handleSubmit(type) {
      if (type == "publish") {
        if (!this.value) {
          this.$message.error("内容不能为空!");
          return;
        }

        this.submitting = true;
        this.addComment(type);
      } else if (type == "reply") {
        if (!this.replyValue) {
          this.$message.error("内容不能为空!");
          return;
        }
        this.submitting2 = true;
        this.addComment(type);
      }
    },
    addComment(type) {
      setTimeout(() => {
        this.submitting = false;
        this.submitting2 = false;

        addComment({
          content: type == "publish" ? this.value : this.replyValue,
          level: type == "publish" ? 1 : 2,
          articleId: this.articleId,
          commIdOne: type == "publish" ? 0 : this.firstCommentId,
          commIdTwo: type == "publish" ? 0 : this.secondCommentId,
        }).then((res) => {
          if (type == "publish") {
            this.value = "";
            this.getFirstCommentList();
            this.$message.success("已成功添加评论！");
          } else {
            this.replyValue = "";
            this.replyDiv = false;
            this.getSecondCommentList();
            this.$message.success("已成功回复评论！");
          }
        });
      }, 1000);
    },
    handleChange(e) {
      let id = e.target.id;

      if (id == "publish") {
        this.value = e.target.value;
      } else {
        this.replyValue = e.target.value;
      }
    },
    doOperation(type, oper, commentId, authorName, event, secondCommentID) {
      if (type == 1) {
        this.firstCommentId = commentId;
        if (oper == "回复") {
          this.replyDiv = true;
          this.placeholder = `回复${authorName}`;
        } else if (event.target.innerText == "展开") {
          event.target.innerText = "收起";
          document.getElementById(secondCommentID).style.display = "block";
          this.getSecondCommentList();
        } else if (event.target.innerText == "收起") {
          event.target.innerText = "展开";
          document.getElementById(secondCommentID).style.display = "none";
        } else if (oper == "删除") {
          deleteComment(this.firstCommentId).then((res) => {
            this.getFirstCommentList();
            this.$message.success("已成功删除评论！");
          });
        }
      } else {
        this.secondCommentId = commentId;
        if (oper == "回复") {
          this.replyDiv = true;
          this.placeholder = `回复${authorName}`;
        } else {
          deleteComment(this.secondCommentId).then((res) => {
            this.getSecondCommentList();
            this.$message.success("已成功删除评论！");
          });
        }
      }
    },
    cancelReply() {
      this.replyDiv = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.green-btn {
  width: 120px;
  font-size: 14px;
  background-color: #00b98d;
  border-color: #00b98d;
}

.green-btn2 {
  width: 80px;
  font-size: 14px;
  background-color: #00b98d;
  border-color: #00b98d;
}

.actions-mr {
  display: inline-block;
  margin-top: 17px;
}

.ant-list-item {
  display: block !important;
}

.reply-btn {
  margin: 10px 0;
}

.reply-btn > el-button {
  background-color: #00b98d !important;
}

.reply-div {
  position: fixed;
  bottom: 0;
  width: calc(100vw - 290px);
  background: #fff;
}
</style>